<template>
    <a-layout style="height: 100%;" class="design-content-container">
        <a-layout-sider :width="layoutSiderWidth" class="content-sider">
            <div class="flex w-full h-full">
                <content-chart :top-width="chartWidth"/>
                <content-layer :top-width="layerWidth"/>
            </div>
        </a-layout-sider>
        <a-layout-content style="position: relative;">
            <content-configuration/>
        </a-layout-content>
    </a-layout>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import contentChart from './contentChart/index.vue';
import contentLayer from './contentLayer/index.vue'
import {useDataViewLayoutStore} from '@/stores/dataviewLayout'
import { storeToRefs } from 'pinia';
import contentConfiguration from '../contentConfiguration/index.vue'

const chartWidth = 330
const layerWidth = 200

const dataviewLayoutStore = useDataViewLayoutStore();
const { dataviewLayoutState } = storeToRefs(dataviewLayoutStore);

const layoutSiderWidth = computed(()=>{
    // 都开启展示
    if(dataviewLayoutState.value.isShowLayer && dataviewLayoutState.value.isShowChartList){
        return chartWidth + layerWidth
    }
    // 图层隐藏
    if(dataviewLayoutState.value.isShowChartList){
        return chartWidth
    }
    // 组件隐藏
    if(dataviewLayoutState.value.isShowLayer){
        return 65 + layerWidth
    }    
    // 都隐藏
    return 65
})
</script>

<style lang="scss" scoped>
.design-content-container{
    .content-sider{
        background-color: #fff;
        overflow: hidden;
        transition: all 0.3s ease;
    }
}
</style>